<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>新增商品</title>
		<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../../css/public.css" media="all">
		<style type="text/css">
			body>div {
				padding: 0px 20px;
			}

			/* 商品信息（采购退货） */
			#commodity-information>fieldset>form>div>div:nth-child(1),
				{
				display: flex;
				flex-wrap: wrap;
			}

			#commodity-information>fieldset>form>div>hr {
				border-bottom: px solid #eee !important;
			}

			#commodity-information>fieldset>form>div>div:nth-child(1)>div:nth-child(n)>div>input,
			#commodity-information>fieldset>form>div>div:nth-child(3)>div:nth-child(n)>div>input {
				width: 250px;
				margin-bottom: 10px;
			}

			#commodity-information>fieldset>form>div>div:nth-child(1)>div:nth-child(n)>div>input[readonly],
			#commodity-information>fieldset>form>div>div:nth-child(3)>div:nth-child(n)>div>input[readonly] {
				height: 38px;
				line-height: 1.3;
				border-width: 1px;
				border-style: solid;
				background-color: #fff;
				color: rgba(0, 0, 0, .85);
				border-radius: 2px;
				border: 0px;
			}
			
			/* 商品信息（采购退货）中的input容器 */
			#commodity-information > fieldset > form > div > div:nth-child(1),
			#commodity-information > fieldset > form > div > div:nth-child(3){
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			
		</style>
	</head>
	<body>

		<div style="display: flex;justify-content: space-around; ">

			<!-- 查询商品列表 -->
			<fieldset class="layui-elem-field layui-field-title layui-inline" style="margin-top: 50px;">
				<!-- 查询商品列表容器-标题 -->
				<legend>查询商品列表</legend>

				<!-- 查询商品 -->
				<div>

					<p>请输入商品编号或名称查询商品，查询到商品后添加到右边所选商品</p>
					<div>
						<span>输入商品编号或名称查询商品：</span>
						<input type="text" />
						<button>加入所选商品</button>
					</div>

				</div>

				<div class="layui-tab">

					<ul class="layui-tab-title">
						<li class="layui-this">商品清单</li>
						<li>商品列表</li>
					</ul>

					<div class="layui-tab-content">

						<!-- 商品清单 -->
						<div class="layui-tab-item layui-show">

							<!-- 商品清单详情表 -->
							<table class="layui-hide" id="commodity-list" lay-filter="commodity-list"></table>
						</div>

						<!-- 商品列表 -->
						<div class="layui-tab-item">

							<!-- 药品分类列表 -->
							<div id="drug-list" class="demo-tree demo-tree-box layui-inline"
								style="position: relative;overflow-x: hidden;overflow-y: scroll;width: 150px;height: 190px;">
							</div>
							
							<!-- 药品数据表 -->
							<div class=" layui-inline">
								<!-- 药品数据表 -->
								<table class="layui-hide" id="drug-details" lay-filter="drug-details"></table>
							</div>

						</div>

					</div>

				</div>

			</fieldset>

			<!-- 所选商品 -->
			<fieldset class="layui-elem-field layui-field-title layui-inline" style="margin-top: 50px;">
				<!-- 所选商品-标题 -->
				<legend>所选商品</legend>

				<!-- 所选药品详情表 -->
				<table class="layui-hide" id="selected-drugs"></table>


			</fieldset>

		</div>
		
		
		<!-- 商品信息(采购退货)-弹出框 -->
		<div id="commodity-information" style="display: none; width: 800px;">

			<!-- 商品信息 -->
			<fieldset class="layui-elem-field layui-field-title">

				<!-- 商品信息-标题 -->
				<legend style="font-size: 14px;">商品信息</legend>

				<!-- 商品信息表单 -->
				<form class="layui-form" lay-filter="lay-commodity-info">
					<div class="layui-form">

						<!-- 商品信息上半部分 -->
						<div>
							<div class="layui-inline">
								<label class="layui-form-label">商品编号：</label>
								<div class="layui-input-inline">
									<input type="text" name="proId" readonly>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">商品名称：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescName" readonly>
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">规格型号：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescSize" readonly>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">单位：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescUnit" readonly>
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">当前库存：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescInventoryNum" readonly>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">批准文号：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescPostil" readonly>
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">生产厂商：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescManufacturer" readonly>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">备注：</label>
								<div class="layui-input-inline">
									<input type="text" name="proComment" readonly>
								</div>
							</div>
						</div>

						<hr />

						<!-- 商品信息下半部分 -->
						<div>
							<div class="layui-inline">
								<label class="layui-form-label">退货单价：</label>
								<div class="layui-input-inline">
									<input type="text" name="proSalePrice" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">数量：</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input">
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">产品批次：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescBatchNum" class="layui-input">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">总金额：</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input">
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">生产日期：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescStartDate" readonly>
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">当前库存：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescInventoryNum" readonly>
								</div>
							</div>

							<div class="layui-inline">
								<label class="layui-form-label">有效期：</label>
								<div class="layui-input-inline">
									<input type="text" name="inveDescValidityDate" readonly>
								</div>
							</div>
							<div class="layui-inline" style="width: 360px;height: 48px;"></div>

							<div>
								<label class="layui-form-label">备注：</label>
								<div class="layui-input-inline">
									<input type="text" class="layui-input" style="width: 610px;">
								</div>
							</div>
						</div>

						<!-- 商品信息按钮部分 -->
						<div style="display: flex; justify-content: center;">

							<!-- 确定、退出按钮 -->
							<div class="layui-inline"
								style="width: 300px;display: flex;justify-content: space-between; ">
								<button type="button" class="layui-btn">确定</button>
								<button type="button" class="layui-btn">退出</button>
							</div>

						</div>

					</div>

				</form>

			</fieldset>

			<!-- 商品批次信息 -->
			<div class="layui-tab">

				<ul class="layui-tab-title">
					<li class="layui-this">商品批次信息</li>
				</ul>

				<fieldset>
					<!-- 提示信息 -->
					<legend>可以在下面列表中选择不同批次的商品</legend>

					<div class="layui-tab-content" style="padding: 0px;">
						<!-- 不同批次的商品清单 -->
						<div class="layui-tab-item layui-show">

							<!-- 不同批次的商品数据表 -->
							<table class="layui-hide" id="batch-no-different" lay-filter="batch-no-different"></table>
							<!-- lay-filter="batch-no-different" -->
						</div>
					</div>

				</fieldset>

			</div>

		</div>

		<script src="../../js/jquery-3.6.0.min.js"></script>
		<script src="../../layui/layui.js" charset="utf-8"></script>
		
		<script type="text/javascript">
			$(function() {

				layui.use(['tree', 'util', 'table','form'], function() {
					var table = layui.table,
						tree = layui.tree,
						layer = layui.layer,
						util = layui.util,
						form = layui.form,

						//商品列表-树形组件数据
						drugReetComponent = [{
							title: '处方药',
							id: 1,
							children: [{
								title: '抗微生物药',
								id: 1000,
							}, {
								title: '解热镇痛药',
								id: 1001
							}, {
								title: '消化系统用药',
								id: 1002
							}]
						}, {
							title: '非处方药',
							id: 2,
							children: [{
								title: '抗微生物药',
								id: 2000,
							}, {
								title: '解热镇痛药',
								id: 2001
							}, {
								title: '消化系统用药',
								id: 2002
							}]
						}, {
							title: '中药引片',
							id: 3,
							children: [{
								title: '抗微生物药',
								id: 3000,
							}, {
								title: '解热镇痛药',
								id: 3001
							}, {
								title: '消化系统用药',
								id: 3002
							}]
						}, {
							title: '中药材',
							id: 3,
							children: [{
								title: '抗微生物药',
								id: 3000,
							}, {
								title: '解热镇痛药',
								id: 3001
							}, {
								title: '消化系统用药',
								id: 3002
							}]
						}, {
							title: '医疗器械',
							id: 3,
							children: [{
								title: '抗微生物药',
								id: 3000,
							}, {
								title: '解热镇痛药',
								id: 3001
							}, {
								title: '消化系统用药',
								id: 3002
							}]
						}, {
							title: '非药品(保健品)',
							id: 3,
							children: [{
								title: '抗微生物药',
								id: 3000,
							}, {
								title: '解热镇痛药',
								id: 3001
							}, {
								title: '消化系统用药',
								id: 3002
							}]
						}];
					
					// 商品列表-树形组件应用
					tree.render({
						elem: '#drug-list', //默认是点击节点可进行收缩
						data: drugReetComponent
					});

                    /*************************************** 查询商品列表 ***************************************/
					
					/* 商品清单 商品数据表 ------ elem: '#commodity-list' */ 	// 85
					table.render({
						elem: '#commodity-list',
						checkedKey: 'id',
						id: 'com-list',
						url: '/addReturnedInfoBtn/'+parent.depotId,
						cols: [
							[{
								field: 'proId',
								title: '商品编号',
								align: 'center'
							}, {
								field: 'inveDescName',
								title: '商品名称',
								align: 'center'
							}, {
								field: 'inveDescUnit',
								title: '单位',
								align: 'center'
							}, {
								field: 'inveDescSize',
								title: '规格',
								align: 'center'
							}, {
								field: 'proSalePrice ',
								title: '参考进价',
								align: 'center',
								templet:function(obj){
								    return obj.productInfo.proSalePrice;
								}
							}, {
								field: 'inveDescInventoryNum',
								title: '库存量',
								align: 'center'
							}, {
								field: 'inveDescManufacturer',
								title: '生产厂商',
								align: 'center'
							}]
						],
						page: true,
						done:function (obj) {
							console.log(obj.data);
                        }
					});
					
					/* 查询商品列表 - 获取当前双击的数据 */
					var purchaseReturnData;
					
					/* 商品清单详情 数据表格双击功能 */
					table.on('rowDouble(commodity-list)', function(obj) { // commodity-list 对应 lay-filter属性 - 85
						commodityInformation();
						form.val('lay-commodity-info',obj.data);
					});
					
					/* 商品信息(采购退货)-弹出框 */
					function commodityInformation() {

						layer.open({
							title: '商品信息(采购退货)',
							zIndex: 99999999,
							content: $('#commodity-information'),
							type: 1,
							success: function() {
								table.reload('batch-no-different');
							}
						})

					}
					
					/* 商品信息(采购退货)-弹出框-商品批次信息数据表 */
					table.render({
						elem: '#batch-no-different', // 对应
						url: '../../api/commodity-list.json',
						cols: [
							[{
								field: 'proId',
								title: '商品编号',
								align: 'center'
							}, {
								field: 'proName',
								title: '商品名称',
								align: 'center'
							}, {
								field: 'purStoDescUnit',
								title: '单位',
								align: 'center'
							}, {
								field: 'proSize',
								title: '规格',
								align: 'center'
							}, {
								field: 'purRetDescPrice',
								title: '参考进价',
								align: 'center'
							}, {
								field: 'inveDescInventoryNum',
								title: '库存量',
								align: 'center'
							}, {
								field: 'purStoDescManufacturer',
								title: '生产厂商',
								align: 'center'
							}]
						],
						page: true
					});

					/* 商品信息(采购退货) - 数量input框 - 默认数量为1 */

					/* 数量input框 - 判断框内是否为数字 */

                    /* 商品信息(采购退货) - 总金额input框 - 退货单价*数量 */


					
					/* 商品列表-数据表 */
					table.render({
						elem: '#drug-details',
						url: '../../api/commodity-list.json',
						cols: [
							[{
								field: 'proId',
								title: '商品编号',
								align: 'center'
							}, {
								field: 'proName',
								title: '商品名称',
								align: 'center'
							}, {
								field: 'purStoDescUnit',
								title: '单位',
								align: 'center'
							}, {
								field: 'proSize',
								title: '规格',
								align: 'center'
							}, {
								field: 'purRetDescPrice',
								title: '参考进价',
								align: 'center'
							}, {
								field: 'inveDescInventoryNum',
								title: '库存量',
								align: 'center'
							}, {
								field: 'purStoDescManufacturer',
								title: '生产厂商',
								align: 'center'
							}]
						],
						page: true
					});
					
					
					/* 商品清单详情 数据表格双击功能 */
					table.on('rowDouble(drug-details)', function(obj) { // drug-details 对应 lay-filter属性 - 98
						commodityInformation();
						form.val('lay-commodity-info',obj.data);
					});


                    /*************************************** 所选商品 ***************************************/
					
					/* 所选商品-所选药品详情表 */
					table.render({
						elem: '#selected-drugs',
						url: '../../api/commodity-list.json',
						cols: [
							[{
								field: 'id',
								title: 'ID',
								unresize: true,
								align: 'center',
								totalRowText: '合计'
							}, {
								field: 'username',
								title: '用户名',
								align: 'center',
								width: 80,
							}, {
								field: 'sex',
								title: '性别',
								align: 'center'
							}, {
								field: 'city',
								title: '城市',
								totalRow: true,
								align: 'center'
							}, {
								field: 'sign',
								title: '签名',
								totalRow: true,
								align: 'center'
							}, {
								field: 'experience',
								title: '积分',
								align: 'center'
							}, {
								field: 'score',
								title: '评分',
								align: 'center'
							}, {
								field: 'classify',
								title: '职业',
								align: 'center'
							}, {
								field: 'classify',
								title: '职业',
								align: 'center'
							}]
						],
						page: true
					});

				});

			})
		</script>
	</body>
</html>
